import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { gettabar  } from  '../../store/modules/module'
import "./tabar.scss"
export default function Tabar() {
    const navigate = useNavigate()
    const dispatch = useDispatch()

    const [tablist, setTablist] = useState<any>([
        { name: '首页', path: '/app/home', },
        { name: '产业兴旺', path: '/app/category' },
        { name: '生态宜居', path: '/app/cart' },
        { name: '乡风文明', path: '/app/order' },
        { name: '治理有效', path: '/app/my' },
        { name: '生活富裕', path: '/app/data' },
    ])
    const handleClick = (item: any) => {
        //将其存进store中
        console.log(item);
        dispatch(gettabar(item))
        // navigate(item.path)
        if(item.path==='/app/home'){
            navigate('/app/home')
        }else {
            navigate('/app/partyorganizationmanagement')
        }
       
    }
    const DataM = ()=>{
        navigate('/dashboard')
        
    }
    let setting=()=>{
        navigate('/Systemadministration')
    }
    return (
        <div>
            <div className="box">
                <div className="box2">
                <h3>数字乡村平台</h3>
                    {
                        tablist.map((item: any, index: number) => {
                            return (
                                <div className="tab"  key={index} onClick={()=>{handleClick(item)}}>
                                    <p>{item.name}</p>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="right">
                    <p onClick={setting}><img src="/pzb1.png" alt="" style={{width:'20px',height:'20px'}}/>系统管理</p>
                    <p onClick={()=>{{DataM()}}} ><img src="/icon/sjdp.png" alt=""  style={{width:'20px',height:'20px'}}/>数据大屏</p>
                    <p>
                        <img src="/logo192.png" alt="" style={{
                            width: '30px', height: '30px',borderRadius:'50%'}} />
                        admin</p>
                </div>
            </div>
        </div>
    )
}
